<template>
	<zui-box>
		<!-- 头部导航 -->
		<zui-navbar title="客服"></zui-navbar>

		<u-gap height="30rpx"></u-gap>

		<view class="list">
			<view class="item" v-for="(item,index) in list " :key="index">
				<zui-flat bgColor="#fff">
					<u-gap height="15rpx"></u-gap>
					<zui-start padding="15rpx">
						<view class="name">客服姓名</view>
						<view class="value">{{ item.name }}</view>
					</zui-start>
					<zui-start padding="15rpx">
						<view class="name">客服座机</view>
						<view class="value">{{ item.landline }}</view>
					</zui-start>
					<zui-start padding="15rpx">
						<view class="name">手机号</view>
						<view class="value">{{ item.phone }}</view>
					</zui-start>
					<zui-start padding="15rpx">
						<view class="name">二维码</view>
						<view class="qrcode" @click="lookimg(item.qr_code)">
							<image :src="item.qr_code" mode="aspectFit"></image>
						</view>
					</zui-start>
					<u-gap height="15rpx"></u-gap>
				</zui-flat>
				<u-gap height="30rpx"></u-gap>
			</view>
		</view>
	</zui-box>
</template>

<script>
export default {
	data() {
		return {
			list: []
		};
	},
	onShow() {
		this.get_list();
	},
	methods: {
		get_list() {
			uni.$u.http
				.get('/app/customer/list', {
					params: {},
					custom: {
						auth: true,
						toast: false,
						catch: false
					}
				})
				.then(res => {
					this.list = res;
					console.log('this.list',this.list)
				})
				.catch(err => {});
		},
		lookimg(url) {
			uni.previewImage({
				urls: [url]
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.name {
	color: #333;
	width: 120rpx;
	margin-right: 60rpx;
}
.value {
	color: #333;
}
.qrcode {
	width: 160rpx;
	height: 160rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
</style>
